<script setup lang="ts">
import { Slider } from 'vant';
import { onMounted, ref, watch } from 'vue';
import { hub } from './canvas/hub';
import { useEyeDropper } from '@vueuse/core'
import { useColorStore } from './store/Color';
import { UserInput } from './UserInput/UserListener';
import Icon from '@konghayao/vue-material-icons'
const store = useColorStore()
const changeSize = (size: number) => {
    store.size = size
    hub.emit('changeSize', size)
}
onMounted(() => {
    // 修复第一次笔迹大小问题
    hub.emit('changeSize', store.size)
})
const { isSupported, open, sRGBHex } = useEyeDropper()
watch(sRGBHex,
    store.changeColor
)

</script>

<template>
    <main
        class="absolute top-12 left-0 flex flex-col w-12 bg-zinc-700 shadow-lg rounded-full ml-4 px-4 pt-6 pb-2 select-none items-center justify-between"
    >
        <div class="w-full flex place-content-center h-24">
            <Slider
                class="slider"
                v-model="store.size"
                vertical
                min="1"
                max="10"
                reverse
                @update:model-value="changeSize"
            >
                <template #button>
                    <div class="btn">{{ store.size }}</div>
                </template>
            </Slider>
        </div>
        <div
            class="my-8 h-6 w-6 rounded-md border-2 border-gray-300"
            @click="() => open()"
            v-if="isSupported"
            :style="{
                backgroundColor: store.selectedColor
            }"
        ></div>
        <div class="w-full flex place-content-center h-24">
            <Slider
                class="slider"
                v-model="store.alpha100"
                vertical
                min="1"
                max="255"
                reverse
                @update:model-value="store.changeAlpha"
            >
                <template #button>
                    <div class="btn">{{ store.alpha100 }}</div>
                </template>
            </Slider>
        </div>
        <div class="text-white text-lg flex flex-col justify-between">
            <Icon
                class="text-lg p-1 rounded-full bg-zinc-500 my-2 transition-transform hover:scale-125"
                @click="UserInput.cancel"
            >turn_left</Icon>
            <Icon
                class="text-lg p-1 rounded-full bg-zinc-500 my-2 transition-transform hover:scale-125"
                @click="UserInput.recover"
            >turn_right</Icon>
        </div>
    </main>
</template>

<style scoped>
.slider {
    --van-slider-active-background-color: transparent;
    --van-slider-inactive-background-color: transparent;
    @apply bg-zinc-200 shadow-inner w-full;
}
.btn {
    @apply w-6 h-6 shadow-lg bg-zinc-600 text-white rounded flex place-content-center;
}
</style>
